<template>
  <div id="RegisterNow">
    <div class="header-box"></div>
    <div class="container">

      <div class="img-box">
        <img src="../assets/logo.png" class="logo">
      </div>
      <div class="center-box">
        <div class="childer">
          <h2>找工作</h2>
          <span>专注互联网职业机会</span>
          <img src="../assets/zhaogonzuo.png" class="img">
          <div class="btn">
            <button @click="jumpLogin">去找工作</button>
          </div>
        </div>
        <div class="v-dashed"></div>
        <div class="childer">
          <h2>招人</h2>
          <span>互联网都在拉钩</span>
          <img src="../assets/38.png" class="img">
          <div class="btn">
            <button @click="jumpPut">去发布职位</button>
          </div>
        </div>
      </div>
      <div class="link">
        <span>已有账号，<router-link to="/login">登录</router-link></span>
      </div>
    </div>
    <dailog
      v-if="dailogValue"
      @sentDailogValue="handleDailogClose"
    />
  </div>
</template>

<script>
import "@/assets/css/global.css"
import Dailog from "@/components/Dailog.vue" 

export default {
  components:{  Dailog  },
  name: 'RegisterNow',
  data(){
    return{
      dailogValue: false,
    }
  },
  methods:{
    jumpLogin(){
      this.$router.push('/login')
    },
    handleDailogClose(){
      this.dailogValue = false
    },
    jumpPut(){
      this.dailogValue = true
    }
  }

}
</script>

<style scoped>

  #RegisterNow {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 97vh;
    width: 99vw;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .header-box {
    position: absolute;
    height: 40%;
    width: 100%;
    margin-top: 0px;
    background-color: rgba(0, 179, 138, 1);
  }

  .container {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .center-box {
    display: flex;
    position: relative;
    width: 800px;
    top: 50%;
    transform: translateY(-58%);
    color:rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    border: rgba(220, 225, 230, 1) solid 1px;
    border-radius: 3px;
  }

  .childer {
    width: 50%;
    font-size: 15px;
    text-align: center;
    padding: 20px;
  }

  h2 span {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
  }

  .img {
    height: 220px;
    margin-top: 40px;
  }

  .btn {
    margin-top: 50px;
    margin-bottom: 30px;
  }

  button {
    width: 200px;
    height: 40px;
    background-color: white;
    color: rgba(0, 179, 138, 1);
    border-radius: 3px;
    border: rgba(0, 179, 138, 1) solid 1px;
    cursor: pointer;
  }

  button:hover {
    color: white;
    background-color: rgba(0, 179, 138, 1);
  }

  .logo {
    height: 30px;
  }

  .link {
    margin-top: 50px;
    text-align: center;
    font-size: 15px;
    color: rgba(128, 128, 128, 1);

  }

  span {
    color:rgba(128, 128, 128, 1)
  }

  a {
    color: rgba(0, 179, 138, 1);
    text-decoration: none;

  }

  .v-dashed {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 0;                 /* 不占宽度 */
  height: 200px;            /* 虚线高度 */
  border-left: 1.5px dashed rgba(229, 229, 229, 1);
  margin: 0 auto;           /* 居中（可选） */
}

</style>
